<!--
 * @Author: your name
 * @Date: 2021-11-05 12:40:10
 * @LastEditTime: 2021-11-23 18:24:28
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \算法测试\day0906\表单懒加载.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            max-height: 200px;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div class="main" onscroll="divscrollFn(event)">
        <table>
            <thead>
                <tr>
                    <th>第一个字段</th>
                    <th>第二个字段</th>
                    <th>第三个字段</th>
                    <th>第四个字段</th>
                    <th>第五个字段</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1.1</td>
                    <td>1.2</td>
                    <td>1.3</td>
                    <td>1.4</td>
                    <td>1.5</td>
                </tr>
                <tr>
                    <td>1.1</td>
                    <td>1.2</td>
                    <td>1.3</td>
                    <td>1.4</td>
                    <td>1.5</td>
                </tr>
                <tr>
                    <td>1.1</td>
                    <td>1.2</td>
                    <td>1.3</td>
                    <td>1.4</td>
                    <td>1.5</td>
                </tr>
                <tr>
                    <td>1.1</td>
                    <td>1.2</td>
                    <td>1.3</td>
                    <td>1.4</td>
                    <td>1.5</td>
                </tr>
                <tr>
                    <td>1.1</td>
                    <td>1.2</td>
                    <td>1.3</td>
                    <td>1.4</td>
                    <td>1.5</td>
                </tr>
                <tr>
                    <td>1.1</td>
                    <td>1.2</td>
                    <td>1.3</td>
                    <td>1.4</td>
                    <td>1.5</td>
                </tr>
                <tr>
                    <td>1.1</td>
                    <td>1.2</td>
                    <td>1.3</td>
                    <td>1.4</td>
                    <td>1.5</td>
                </tr>
                <tr>
                    <td>1.1</td>
                    <td>1.2</td>
                    <td>1.3</td>
                    <td>1.4</td>
                    <td>1.5</td>
                </tr>
                <tr>
                    <td>1.1</td>
                    <td>1.2</td>
                    <td>1.3</td>
                    <td>1.4</td>
                    <td>1.5</td>
                </tr>
                <tr>
                    <td>1.1</td>
                    <td>1.2</td>
                    <td>1.3</td>
                    <td>1.4</td>
                    <td>1.5</td>
                </tr>
                <tr>
                    <td>1.1</td>
                    <td>1.2</td>
                    <td>1.3</td>
                    <td>1.4</td>
                    <td>1.5</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        let n = 1;
        function dian() {
            console.log(1);
        }
        function divscrollFn(event) {
            let el = event.target;
            if (el.scrollTop + el.clientHeight >= el.scrollHeight) {
                console.log("到底拉");
                /*  
                    scrollTop为滚动条在Y轴上的滚动距离。
 
                    clientHeight为内容可视区域的高度。
 
                    scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。

                这里判断到进入了底部 这里你就开始请求数据
                    数据拿过来之后你可以选择添加进表格数据里面 如果它会根据你的数据自动更新表格的话
                    意思就是像react的useState一样 你更新了数据 绑定的元素也会根据数据自动更新
                    像vue的 ：数据一样 你更新数据 对应的就更新

                    如果angular不会自动更新 你可以选择操纵节点 创建节点 添加数据 然后再把节点添加进表格里面去
                    如果更新后滚轮自动回到了最上面 (也就是表格自动刷新了一道 应该不会 我不了解angular) 
                    那么你就在加载数据前获取一次滚轮滚动的位置 加载完成后再把获取的滚轮位置滚过去 scrollTo(坐标)滚动到特定位置 

                    （最好不要一次就加载一次数据 用户体验很不好 最好是一次加载5条10条左右）
                */
            };
        }
    </script>
</body>

</html>